<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>笑脸</title>
    <style type="text/css">
    .face{
       width: 500px;height: 500px;
       border-radius: 50%;
       background-color:#70822c;
       position: absolute;
       /*animation:face 5s infinite;*/ 
    }
    .eye{
        width: 500px;height: 50px;
        position: relative;
        top: 180px; 
    }
    .eye-left{
        width: 120px;height: 49px;
        border-radius:40px;
        position: absolute;
        left: 100px;
        background-color: white;
    }
    .eye-left-bool{
        width: 50px;height: 50px;
        border-radius: 50%;
        margin-left: 0px;
        background-color: black;
        animation:myfirst 5s infinite;
    }
    .eye-right{
        width: 120px;height: 49px;
        border-radius:40px;
        position: absolute;
        left: 280px;
        background-color: white;
    }
    .eye-right-bool{
        width: 50px;height: 50px;
        border-radius: 50%;
        margin-left: 70px;
        animation:mysecond 5s infinite;
        background-color: black;
    }
    .cheek{
        width: 500px;height: 60px;
        position: relative;
        top: 210px;
    }
    .cheek-left{
        width: 60px;height: 60px;
        border-radius: 50%;
        position: absolute;
        left: 80px;
        background-color: white;
    }
    .cheek-right{
        width: 60px;height: 60px;
        border-radius: 50%;
        position: absolute;
        left: 350px;
        background-color: white;
    }
    .mouth{
        width: 300px;height: 300px;
        border-radius: 50%;
        border-bottom: 3px solid black;
        position: absolute;
        left: 100px;
    }
    .brow-left{
        width: 100px;height: 100px;
        border-radius: 50%;
        border-top: 3px solid black;
        position: absolute;
        left: 30px;
        top: 100px;
        transform:rotate(20deg);
        z-index: 50;
    }
    .brow-right{
        width: 100px;height: 100px;
        border-radius: 50%;
        border-top: 3px solid black;
        position: absolute;
        left: 400px;
        top: 100px;
        transform:rotate(-20deg);
        z-index: 50;
    }
    @keyframes myfirst{
    0%   {margin-left: 0px;background-color: black;}
    50%  {margin-left: 70px;background-color:red;}
    100% {margin-left: 0px;background-color:black;}
    }
    @keyframes mysecond{
    0%   {margin-left:70px;background-color: black;width: 50px;}
    50%  {margin-left: 0px;background-color:red; width: 30px;}
    100% {margin-left:70px;background-color:black;width: 50px;}
    }
    @keyframes face{
        0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    75%  {background: green;}
    100% {background: red; }
    }
    </style>
</head>
<body>
    <div class="brow-left"></div>
    <div class="brow-right"></div>
    <div class="face">
    <div class="eye">
        <div class="eye-left">
            <div class="eye-left-bool"></div>
        </div>
        <div class="eye-right">
            <div class="eye-right-bool"></div>
        </div>
    </div>
    <div class="cheek">
        <div class="cheek-left"></div>
        <div class="cheek-right"></div>
    </div>
        <div class="mouth"></div>
    </div>
</body>
</html>